<template>
    <div class="demo">
        <!-- 组件的结构 html -->
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</template>

<script>
    /*
        js的三种暴露方法：
        1、export const school=Vue.expent(options):分别暴露
            其他文件导入组件: import School from './School.vue'
            import (定义组件名) from '需要导入的组件路径'
        2、最后面加上export{school} :统一暴露

        3、最后加上export default school默认暴露
            

        import values from './a.vue'
        import * as val from './a.vue'
        import {num1, height, flag, sum, add, Person} from './a.Vue'
     */

    //组件交互相关的代码(数据和方法) js
    // const school = Vue.extend({
    //     data() {
    //         return {
    //             schoolName:'华北水利水电大学',
    //             address:'郑州'
    //         }
    //     },
    // })
    // export default school

    // -----------化简
    export default{
        name:'School',
        data() {
            return {
                name:'华北水利水电大学',
                address:'郑州'
            }
        },
    }
</script>

<style>
    /* 组件的样式 css */
    .deml{
        background-color: orange;
    }
</style>